<template>
    <div>
      <div class="calendar-box">
      <el-calendar v-model="value">
      </el-calendar>
      </div>
      <div class="bot-form">
          <el-button type="primary" @click="dialog = true">发送通知</el-button>
          <el-button type="text" size="small" @click="dialogFormVisible = true">快捷发送还书提醒</el-button>
      </div>
      <div>
        <el-drawer
          title="通知发送"
          :before-close="handleClose"
          :visible.sync="dialog"
          direction="rtl"
          custom-class="demo-drawer"
          ref="drawer"
          >
          <div class="demo-drawer__content" style="padding: 25px;">
            <el-form :model="form">
              <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  :rows="2"
                  v-model="form.title"
                  maxlength="500"
                  show-word-limit
                >
                </el-input>
              </el-form-item>
              <el-form-item label="内容" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  autocomplete="off"
                  maxlength="1500"
                  show-word-limit
                  v-model="form.content">
                </el-input>
              </el-form-item>
              
              <el-form-item label="发送对象" :label-width="formLabelWidth">
                <el-input
                  placeholder="请输入对方账号"
                  v-model="form.username"
                  clearable>
                </el-input>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="$refs.drawer.closeDrawer()">发 送</el-button>
            </div>
          </div>
        </el-drawer>
      </div>

      <div>
        <el-dialog title="还书通知" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="用户账号" :label-width="formLabelWidth">
              <el-input
                  placeholder="请输入对方账号"
                  v-model="form.username"
                  clearable>
                </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancelFormB">取 消</el-button>
            <el-button type="primary" @click="handleCloseB">发 送</el-button>
          </div>
        </el-dialog>
      </div>


    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
      data () {
          return {
            value: new Date(),
            dialog: false,
            dialogFormVisible:false,
            form:{
              title:'',
              content:'',
              username:''
            }
          }
      },
      methods: {
        handleClose(done) {
          this.$confirm('确定发送吗？')
            .then(() => {
              if(this.form.title == '' || this.form.content == '' || this.form.username == ''){
                this.$message.warning("输入内容不能为空")
              }
              axios.post(this.url+"/admin/notice",{
                "title":this.form.title,
                "content":this.form.content,
                "username":this.form.username,
                "updateUser":localStorage.getItem("username")
              }).then((res) => {
                if(res.data.code == 1){
                  this.$message.success("发送成功")
                  done()
                  this.form.title = ""
                  this.form.content=""
                  this.form.username=""
                }else{
                  this.$message.error(res.data.msg)
                  return
                }
              }).catch(() => {
                this.$message.error("发送失败")
                return
              });
            })
            .catch(() => {});
        },

        handleCloseB(){
          this.$confirm('确定发送吗？')
            .then(() => {
              if(this.form.username == ''){
                this.$message.warning("发送账号不能为空")
              }
              axios.post(this.url+"/admin/notice",{
                "title":"还书提醒",
                "content":"您好，您的图书借阅期限马上就要到了，请您尽快还书，谢谢。",
                "username":this.form.username,
                "updateUser":localStorage.getItem("username")
              }).then((res) => {
                if(res.data.code == 1){
                  this.$message.success("发送成功")
                  this.dialogFormVisible = false
                  this.form.title = ""
                  this.form.content=""
                  this.form.username=""
                }else{
                  this.$message.error(res.data.msg)
                  return
                }
              }).catch(() => {
                this.$message.error("发送失败")
                return
              });
            })
            .catch(() => {});
        },


        cancelFormB(){
          this.form.title = "",
          this.form.content="",
          this.form.username="",
          this.dialogFormVisible = false;
        },

        cancelForm() {
          this.form.title = "",
          this.form.content="",
          this.form.username="",
          this.dialog = false;
        }
      },
      mounted () {
          
      }
  }
  </script>
  
  <style scoped>
    .calendar-box{
      position: absolute;
      width: 500px;
    }

    .bot-form{
      position: absolute;
      right: 3%;
      top: 10%;
      z-index: 999;
    }


  </style>